<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="css/checked.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/sameStyle.css">
    <link rel="stylesheet" type="text/css" href="fonts/iconfont.css">
    <script src="js/pool.js"></script>
</head>
<body>
<!-- 顶部导航 -->
    <div class="top-nav">
        <div class="container">
            <!-- 头部导航左侧 -->
            <ul class="top-nav-l">
                <li class="menu">
                    <a href="""><span class="iconfont icon-start"></span>收藏鲜花网(hua.com)</a>
                </li>
                <li class="menu dropdown">
                    <a href=""><span class="iconfont icon-weixin"></span>关注微信</a>
                    <div class="dropdown-menu dropdown-weixin">
                        <img src="https://img02.hua.com/pc/pimg/wechat_qrcode.jpg" height="124" width="124">
                        <p>扫码关注<br>回复"礼物" 更多惊喜！</p>
                    </div>
                </li>
                <li class="menu dropdown">
                    <a href="" ><span class="iconfont icon-phone2"></span>花礼网app</a>
                    <div class="dropdown-menu dropdown-weixin">
                        <img src="https://img02.hua.com/pc/pimg/app_qrcode.jpg" height="124" width="124">
                        <p>新人专享100元APP礼包</p>
                    </div>
                </li>
            </ul>
            <!-- 头部导航左侧 -->
            <ul class="top-nav-r">
                <li class="menu login" id="LoginInfo"><a href="" >你好，请登录</a><a href="">注册</a></li>
                <li class="rborder"></li>
                <li class="menu"><a href="">订单查询</a></li>
                <li class="rborder"></li>
                <li class="menu dropdown"> <a href="" >我的花礼</a></li>
                <li class="rborder"></li>
                <li class="menu dropdown">
                    <a href="">客户服务<span class="glyphicon glyphicon-triangle-bottom"></span></a>
                    <div class="dropdown-menu dropdown-service">
                        <a href="">在线付款</a>
                        <a href="">帮助中心</a>
                        <a href="">售后服务</a>
                        <a href="">配送范围</a>
                        <a href="">留言反馈</a>
                    </div>
                </li>
                <li class="rborder"></li>
                <li class="menu dropdown">
                    <a href="" >
                        <span class="iconfont icon-gouwuche"></span>购物车<span class="text-primary" id="gwcCount"></span><span class="glyphicon glyphicon-triangle-bottom"></span>
                    </a>
                </li>
                <li class="rborder"></li>
                <li class="menu slogan">鲜花-甜美公主</li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <header>
        <div class="logo">
            <h1><a href="" class="logo-bd">鲜花</a></h1>
            <span></span>            
            <h2>中国鲜花礼品网 始于2005，简称花礼网</h2>
        </div>
        <!--搜索框-->
        <div class="search">
            <form name="i_search" method="post" action="">
                <div class="input-group">
                    <input name="keyword" type="text" class="form-control" placeholder="商品关键词">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">搜索</button>
                    </span>
                </div>
            </form>
            <!-- 关键字部分 -->
            <span class="help-block">
                 <a href="">红玫瑰</a> | <a href="">永生花</a> | <a href="">生日鲜花</a> | <a href="">金玫瑰</a>
            </span>
        </div>
        <!-- 联系方式 -->
        <div class="service">
            <span class="iconfont icon-dianhua"></span>400-889-8188
            <span class="rborder"></span>
            <a href="" ><span class="iconfont icon-kefu"></span>在线客服</a>
        </div>
    </header>
    <!-- 导航条 -->
    <nav class="common">
      <div class="container">
        <div class="categorys dropdown">
            <h3 class="categorys-title">
                <a href=""><span class="pull-right glyphicon glyphicon-menu-down iconfont icon-xiangxia"></span>全部商品导购</a>
            </h3>

            <div class="dropdown-menu dropdown-cate">
                <h4><a href="">鲜花</a></h4>
                <ul class="cate-list list-inline">
                    <li><a href="">爱情鲜花</a></li>
                    <li><a href="">友情鲜花</a></li>
                    <li><a href="">生日鲜花</a></li>
                    <li><a href="">问候长辈</a></li>
                    <li><a href="">祝贺鲜花</a></li>
                    <li><a href="">婚庆鲜花</a></li>
                    <li><a href="">探病慰问</a></li>
                    <li><a href="">道歉鲜花</a></li>
                    <li><a href="">开业花篮</a></li>
                </ul>               
                <h4><a href="">永生花</a></h4>
                <ul class="cate-list list-inline">
                    <li><a href="">经典花盒</a></li>
                    <li><a href="">巨型玫瑰</a></li>
                    <li><a href="">薰衣草</a></li>
                    <li><a href="">永生瓶花</a></li>
                    <li><a href="">特色永生花</a></li>
                </ul>
            </div>
        </div>
        <ul class="nav">
            <li><a href="">首页</a></li>
            <li><a href="">鲜花</a></li>
            <li><a href="">永生花</a></li>
            <li><a href="">蛋糕</a></li>
            <li><a href="">礼品</a></li>
            <li><a href="">巧克力</a></li>
            <li><a href="">花语大全</a></li>
            <li><a href="">设计师臻选鲜花</a></li>            
        </ul>
      </div>
    </nav>

    <!-- 主体显示购物车情况 -->
	<div class="box">
		<div class="all-check">
			<div class="all-t">
				<div class="all-title1 active">全部商品 <span class="produSum"></span></div>
				<div class="all-title2"><a href="list.html">返回首页</a></div>
			</div>
			<div class="all-b">
				<div class="all-text"><input type="checkbox" id="all"><label for="all" class="allCheck">全选</label></div>
				<span class="goods">商品名称</span>
				<span class="no"></span>
				<span class="market_price">市场价</span>
				<!-- 单价 -->
				<span class="price">订购价</span>
				<span class="counts">数量</span>
				<span class="sum">小计</span>
				<span class="act">操作</span>
			</div>
			
		</div>
		<div id="content">
			<ul class="input-list" id="list">

				<!-- <li data-id="01">
				                <input type="checkbox" class="item">
				                <div class="p-goods">
				                    <div class="p-img">
				                        <a href=""><img alt="" src="img/1.jpg"></a>
				                    </div>
				                    <div class="item-msg">
				                        <div class="p-name">
				                                <a href="" class="p-title"></a>
				
				                        </div>
				                        <div class="p-extend p-extend-new">
				                            <span class="promise return-y">
				                                <i class="return-y-icon"></i>
				                                <a href="#none" class="ftx-08">支持7天无理由退货</a>
				                            </span>
				                            <span class="promise">
				                                <i class="jd-service-icon"></i>
				                                <a data-tips="选延保" class="ftx-03 jd-service" href="">选延保</a>
				                            </span>
				                        </div>
				                    </div>
				                </div>
				
				                <div class="cell p-props p-props-new">
				                    <div class="props-txt">￥123</div>
				                </div>
				                
				                <div class="p-price">
				                    <span class="price">￥123</span>
				                    <span class="chu">促销∨</span>
				                    <span class="free">白条三期免息</span>
				                </div>
				
				                <div class="p-quantity">
				                        <div class="quantity-form">
				                            <input type="button" value="-" class="sub">
				                            <input type="text" value="1" class="itxt">
				                            <input type="button" value="+" class="add">
				                        </div>
				                        <div class="quantity-txt">有货</div>
				                </div>
				                <div class="p-sum">
				                    <span class="sum-price">234</span>
				                </div>
				                <div class="p-deleat">
				                    <a href="##" class="cart-remove">删除</a>
				                    <a href="">移到我单位关注</a>
				                    <a href="">加到我的关注</a>
				                </div>
				            </li> -->
				
			</ul>
		</div>
	</div>

	<div class="set-bar">
        <div class="set-info">
            <a class="back" href="list.html" style="width:90px;"><span class="iconfont icon-xiangzuo"></span>继续挑选</a>
            <div class="set-stat">
                应付金额:
                <div class="price">
                    <span class="price-sign">¥</span>
                    <span class="price-num" id="totalMoney">0.00</span>
                </div>
            </div>
        </div>
        <button class="btn btn-primary btn-lg" type="button" id="jiesuan">去结算</button>
    </div>


<script>
    // 添加类名open
    var drop=document.querySelectorAll(".dropdown");
      for(var i=0;i<drop.length;i++){
        drop[i].onmouseenter=function(){
            this.classList.add("open");
        }
        drop[i].onmouseleave=function(){
            this.classList.remove("open");
        }
      }
</script>		
<script src="js/cookie.js"></script>
<script>


//-------------------------------------json数组对象，加载列表--------------------------------------------
    var obj = [{
    "id": "01",
    "title": "为爱相随----多头百合1枝，戴安娜粉玫瑰11枝",
    "minTitle":"为爱相随",
    "oldPrice": "￥229",
    "pirce": "￥179",
    "img": "img/1.jpg",
    "types": "鲜花 编 号：9012033",
    "material": "多头百合1枝，戴安娜粉玫瑰11枝，搭配适量黄莺、满天星",
    "pack": "内层淡紫色棉纸，外层粉色牛油瓦楞纸，紫红色缎带花结",
    "flowerLanguage": "你若不离，我必不弃。爱情是历经风雨的双手紧握；是一路同行的相濡以沫。"
}, {
    "id": "02",
    "title": "甜美公主----白玫瑰22枝，粉佳人粉玫瑰14枝，粉色桔梗5枝",
    "minTitle":"甜美公主",
    "oldPrice": "￥485",
    "pirce": "￥378",
    "img": "img/2.jpg",
    "types": "鲜花 编 号：9012154",
    "material": "各色玫瑰共36枝：白玫瑰22枝，粉佳人粉玫瑰14枝；粉色桔梗5枝，尤加利0.5扎",
    "pack": "绿色/浅绿色双面人造纸，白咖罗纹带花结",
    "flowerLanguage": "再多一点点距离，我就能靠近你。清晰甜美的空气里，爱你到不能呼吸。"
}, {
    "id": "03",
    "title": "真诚祝愿----花篮",
    "minTitle":"真诚祝愿",
    "oldPrice": "￥318",
    "pirce": "￥248",
    "img": "img/3.jpg",
    "types": "鲜花 编 号：9012054",
    "material": "粉色香水百合3枝，红色康乃馨11枝，天堂鸟2枝，跳舞兰5枝，填充适量红色多头康和香槟色桔梗，散尾葵（编织）4枝，绿叶适量",
    "pack": "有柄花篮一个（花篮款式以各城市实际出货为准）",
    "flowerLanguage": "所有美丽都源于真挚与坦诚，虽然幸福会转瞬即逝，快乐却能持久，一份诚挚的祝福，一份真诚的问候，愿你快乐每一天！"
}, {
    "id": "04",
    "title": "一往情深----精品玫瑰礼盒:19枝红玫瑰，勿忘我适量",
    "minTitle":"一往情深",
    "oldPrice": "￥315",
    "pirce": "￥245",
    "img": "img/4.jpg",
    "types": "鲜花-鲜花礼盒 编 号：9010966",
    "material": "高档礼盒装鲜花:19枝红玫瑰，勿忘我适量",
    "pack": "牛皮纸和深咖啡色条纹纸，银色缎带花结，魔力铁山灰包装盒",
    "flowerLanguage": "你的轻柔像阵微风，让我从容不迫，想让你知道，我对你始终一往情深。"
}, {
    "id": "05",
    "title": "浪漫的味道----香槟玫瑰33枝，红豆3枝",
    "minTitle":"浪漫的味道",
    "oldPrice": "￥465",
    "pirce": "￥362",
    "img": "img/5.jpg",
    "types": "鲜花 编 号：9010817",
    "material": "香槟玫瑰33枝，红豆3枝",
    "pack": "内层黄色不织布，外层灰蓝绝色纸，香芋紫人造双面纸，玻璃纸，白蓝色罗纹带",
    "flowerLanguage": "味道,像夏天的温暖,和春天的温润,忘不了的味道,在思念里萦绕!"
}, {
    "id": "06",
    "title": "花香四溢----粉色桔梗1扎",
    "minTitle":"花香四溢",
    "oldPrice": "￥203",
    "pirce": "￥158",
    "img": "img/6.jpg",
    "types": "鲜花 编 号：9012124",
    "material": "粉色桔梗1扎",
    "pack": "白色opp雾面纸 白绿罗纹带",
    "flowerLanguage": "花香四溢蝶儿飞，翩翩起舞令人醉，在这美丽的季节，寻找最美的你！"
}, {
    "id": "07",
    "title": "永远的幸福----白玫瑰9枝，蓝绣球1枝，黄金球5枝",
    "minTitle":"永远的幸福",
    "oldPrice": "￥251",
    "pirce": "￥196",
    "img": "img/7.jpg",
    "types": "鲜花 编 号：9012119",
    "material": "白玫瑰9枝，蓝绣球1枝，黄金球5枝，叶上花7枝",
    "pack": "内层白色雪梨纸， 外层蓝色绝色纸 玻璃纸 白绿宽罗纹带",
    "flowerLanguage": "真心付出，信仰着爱的呵护，你永远的幸福，是送我最好的礼物！"
}, {
    "id": "08",
    "title": "春韵----白色紫罗兰2扎、粉色洋桔梗1扎",
    "minTitle":"春韵",
    "oldPrice": "￥473",
    "pirce": "￥369",
    "img": "img/8.jpg",
    "types": "鲜花-特色鲜花 编 号：9012278",
    "material": "白色紫罗兰2扎、粉色洋桔梗1扎，斑春兰0.5扎（斑春兰如缺货可用尤加利替代）",
    "pack": "矮身圆肚玻璃花瓶系丝带",
    "flowerLanguage": "春天到了，爱会到达，会抵达牵挂。"
}];


    var oList = document.getElementById("list");
    var sumMoney = document.getElementById("totalMoney");    
    //判断一下当前cookie是否存在 如果存在的话获取出cookie的值

    if(getCookie("init_")){
        //将cookie的字符串对象转换为对象
        var data = JSON.parse(getCookie("init_"));
        var str = "";
        var sum=0;//初始化总商品价格
        //将data与obj进行比较 如果id是一样的话就找出相对应的商品了 那么就可以进行字符串拼然后放在页面上即可

        for(var i in data){         
            for(var k in obj){

                if(i == obj[k].id){                 
                    str+=`<li data-id="${obj[k].id}">
                <input type="checkbox" class="item">
                <div class="p-goods">
                    <div class="p-img">
                        <a href=""><img alt="" src="${obj[k].img}"></a>
                    </div>
                    <div class="item-msg">
                        <div class="p-name">
                                <a href="" class="p-title">${obj[k].title}</a>

                        </div>
                        <div class="p-extend p-extend-new">
                            <span class="promise return-y">
                                <i class="return-y-icon"></i>
                                <a href="#none" class="ftx-08">支持7天无理由退货</a>
                            </span>
                            <span class="promise">
                                <i class="jd-service-icon"></i>
                                <a data-tips="选延保" class="ftx-03 jd-service" href="">选延保</a>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="cell p-props p-props-new">
                    <div class="props-txt">${obj[k].oldPrice}</div>
                </div>
                
                <div class="p-price">
                    <span class="price">${obj[k].pirce}</span>
                    <span class="chu">促销∨</span>
                    <span class="free">白条三期免息</span>
                </div>

                <div class="p-quantity">
                        <div class="quantity-form">
                            <input type="button" value="-" class="sub">
                            <input type="text" value="${data[i]}" class="itxt">
                            <input type="button" value="+" class="add">
                        </div>
                        <div class="quantity-txt">有货</div>
                </div>
                <div class="p-sum">
                    <span class="sum-price">${toDecimal2(data[i]*obj[k].pirce.substr(1))}</span>
                </div>
                <div class="p-deleat">
                    <a href="##" class="cart-remove">删除</a>
                    <a href="">移到我单位关注</a>
                    <a href="">加到我的关注</a>
                </div>
            </li>`;
            sum+=Number(toDecimal2(data[i]*obj[k].pirce.substr(1)));
             }


            }

        }
        oList.innerHTML = str;
        sumMoney.innerHTML=sum.toFixed(2);
       
// ------------------------全选框效果代码结束------------------------------

    var aSub = document.querySelectorAll(".sub");//获取减号按钮
    var aAdd = document.querySelectorAll(".add");//获取加号按钮
    var aPrice = document.querySelectorAll(".price");//获取单价
    var oList = document.getElementById("list");

    // 事件代理方式：
   
    oList.onclick = function(e) {
            var e = e||event;
            var target = e.target ||e.srcElement;
             // 点击减号按钮操作
            if(target.tagName == "INPUT" && target.className == "sub"){

                // data[i]-=1;
                // console.log(data);//这里让每次点击时cookie里的数量减1

                var numS= Number(target.nextElementSibling.value);
                    if(numS==1){
                        numS=1;
                    }else{
                        numS--;
                    }           
                    target.nextElementSibling.value = numS;
                    // 获取单价
                    var li=target.parentNode.parentNode.parentNode;
                    var priceS =Number(obj[k].pirce.substr(1));
                    var floatSum=toDecimal2(priceS*numS);
                    li.children[5].firstElementChild.innerHTML ="￥"+floatSum;
            }

            // 点击加号按钮操作
            if(target.tagName == "INPUT" && target.className == "add"){
               
              //获取到当前商品的id
                var numIda = target.parentNode.parentNode.parentNode.getAttribute("data-id");
                //删除掉它里面的那个id作为key的data值value
                 data[numIda]+=1;
                
                //将对象转换为字符串然后再重新存入cookie
                var dataStrs = JSON.stringify(data);
                setCookie("init_",dataStrs,10);

                // console.log(data);//这里让每次点击时cookie里的数量加1



                var num = Number(target.previousElementSibling.value);
                num++;
                target.previousElementSibling.value = num;
                // 获取单价

                var li=target.parentNode.parentNode.parentNode;
                var price =Number(obj[k].pirce.substr(1));
                var floatSum=toDecimal2(price*num);
                li.children[5].firstElementChild.innerHTML ="￥"+floatSum;
            }

            //删除商品
            if(target.tagName == "A" && target.className == "cart-remove"){
                  target.parentNode.parentNode.remove();


                     //获取到当前商品的id
                    var numId = target.parentNode.parentNode.getAttribute("data-id");
                    //删除掉它里面的那个id作为key的data值value
                    delete data[numId];
                    
                    //将对象转换为字符串然后再重新存入cookie
                    var dataStrs = JSON.stringify(data);
                    setCookie("init_",dataStrs,10);

            }   



    }


 // console.log(i , + data[i]);  









    }


 //------------------------------------计算出添加的商品数量-----------------------------------
 setInterval(function(){
     var aLi=document.querySelectorAll(".input-list>li");
    var countP=0;
    countP=aLi.length;
    document.querySelector(".produSum").innerHTML=countP;
    document.querySelector("#gwcCount").innerHTML="("+countP+")";

 },500) 


// ----------------------------计算总价---------------------------------------------------
//保留2位小数，如：2，会在2后面补上00.即2.00    
    function toDecimal2(x) {    
        var f = parseFloat(x);    
        if (isNaN(f)) {    
            return false;    
        }    
        var f = Math.round(x*100)/100;    
        var s = f.toString();    
        var rs = s.indexOf('.');    
        if (rs < 0) {    
            rs = s.length;    
            s += '.';    
        }    
        while (s.length <= rs + 2) {    
            s += '0';    
        }    
        return s;    
    }    

    // -----------------------------------------------全选框效果代码------------------------------------
     var all=document.querySelector("#all");
     var items=document.querySelectorAll(".item");
    //全选框选中则其他选项选中，再点击则其他也不选中
    all.onclick=function(){
        if(this.checked){
            for(var i=0;i<items.length;i++){
                items[i].checked=true;

            }
        }else{
            for(var i=0;i<items.length;i++){
                items[i].checked=false;
            }
        }

   }

    for(var i=0;i<items.length;i++){
        items[i].onclick=function(){
            var flag=true;//标签默认选中
            for(var j=0;j<items.length;j++){
                if(!items[j].checked){//只要存在有未被选中的框则全选框就不能被选中
                    flag=false;
                    break;
                }
            }
            if(flag){
                all.checked=true;
            }else{
                all.checked=false;
            }
        }
    }
</script>
</body>
</html>